<template>
	<div class="app-container">
		<div class="putout">
			<!-- <div class="putout-top">
				<div class="top-con">
					<span class="p1" v-if='balance || balance == 0'>企业一般户余额&nbsp;&nbsp;<span>{{balance | numFilter}}</span>&nbsp;&nbsp;元</span>
					<span class="p1" v-else>企业一般户余额&nbsp;&nbsp;<span>-</span>&nbsp;&nbsp;元</span>
					<span class="p1" v-if='totalBalance || totalBalance == 0'>平台总账户余额&nbsp;&nbsp;<span>{{totalBalance | numFilter}}</span>&nbsp;&nbsp;元</span>
					<span class="p1" v-else>平台总账户余额&nbsp;&nbsp;<span>-</span>&nbsp;&nbsp;元</span>
				</div>
			</div> -->
			<div class="putout-tab">
				<div class="tab-con">
					<router-link tag="a" :to="{name:'putout'}"><span class="active firstSpan">佣金发放明细</span></router-link>
					<router-link tag="a" :to="{name:'detail'}"><span>企业账单明细</span></router-link>
					<router-link tag="a" :to="{name:'outgold'}"><span>出金明细</span></router-link>
					<!-- <span @click='toDetail'>企业账单明细</span> -->
					<!-- <span @click='toOutgold'>出金明细</span> -->
				</div>
			</div>
			<div class="putout-search">
				<div class="search-con">
				  <el-form  :model="formLabel" :inline="true" class='inputBox' :label-position="toLeft" label-width="90px">
					<el-form-item label="时　间"  label-width="60px" class='set20'>
	    				<el-date-picker
					      v-model="timeCon"
					      type="daterange"
					      start-placeholder="开始日期"
					      end-placeholder="结束日期"
					      @change='getTimeCon'
					      value-format='yyyy-MM-dd'
					      :default-time="['00:00:00', '23:59:59']" size="mini"
					      :picker-options="pickerOptions"
					       class="wd260">
					    </el-date-picker>
				    </el-form-item>
				    <el-form-item label="备　注"  label-width="60px">
		                <el-input v-model="formLabel.remark" placeholder="请输入20以内的备注" size="mini"  class="wd260" maxlength='20'  @keyup.enter.native="toSearch"></el-input>
		            </el-form-item>
		            <el-button type='primary' size='mini' class='wd60' @click='toSearch'>搜索</el-button>
			     </el-form>
				</div>
			</div>
			<div class="putout-table">
				<div class="table-con">
					<el-table :data="tableData" style="width: 100%" :stripe='true' v-loading='loading'>
						<el-table-column  label="操作时间" align='left'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.creationTime'>{{scope.row.creationTime}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="操作人" align='left'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.name'>{{scope.row.name}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="发放笔数"  align='right'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.submitCount || scope.row.submitCount == 0'>{{scope.row.submitCount}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="发放总金额" align='right'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.totalMoney || scope.row.totalMoney == 0'>{{scope.row.totalMoney | numFilter}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="成功笔数" align='right'>
							<template slot-scope='scope'>
						 		<span class="setGreen" v-if='scope.row.succedCount || scope.row.succedCount == 0'>{{scope.row.succedCount}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="成功总金额" align='right'>
							<template slot-scope='scope'>
						 		<span class="setGreen" v-if='scope.row.succedMoney || scope.row.succedMoney == 0'>{{scope.row.succedMoney | numFilter}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="失败笔数" align='right'>
							<template slot-scope='scope'>
						 		<span class="setRed" v-if='scope.row.failedCount || scope.row.failedCount == 0'>{{scope.row.failedCount}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="失败总金额" align='right'>
							<template slot-scope='scope'>
						 		<span class="setRed" v-if='scope.row.failedMoney || scope.row.failedMoney == 0'>{{scope.row.failedMoney | numFilter}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="备注" align='left'>
							<template slot-scope='scope'>
						 		<span v-if='scope.row.remarks'>{{scope.row.remarks}}</span>
						 		<span v-else>-</span>
						 	</template>
						</el-table-column>
						<el-table-column  label="操作" align='right'>
							<template slot-scope='scope'>
						 		<span class="setC" @click='toDetailcon(scope.row.id)'>详情</span>
						 	</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="putout-page">
				<el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage1" background :page-size="10" layout="total,prev, pager, next" :total="pagetotal"></el-pagination>
			</div>
		</div>
	</div>

</template>

<script>
	export default{
		data(){
			return{
				toLeft:'left', //label的对齐方式
				timeCon:[], //时间具体区间
				formLabel:{}, //对象
				pickerOptions: {
		          shortcuts: [{
		            text: '最近一周',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
		              picker.$emit('pick', [start, end]);
		            }
		          }, {
		            text: '最近一个月',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
		              picker.$emit('pick', [start, end]);
		            }
		          }, {
		            text: '最近90天',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
		              picker.$emit('pick', [start, end]);
		            }
		          }]
		        },//快捷选项
		        pagetotal:0, //总页数
		        currentPage1:1,//当前页
		        BeginDate:'', //开始时间
		        EndDate:'',//结束时间
		        balance:null, //一般户余额
		        totalBalance:null, //平台余额
		        loading:false,
			}
		},
		mounted(){
			if(this.$route.query.starDate && this.$route.query.endDate){
				this.BeginDate = this.$route.query.starDate;
				this.EndDate = this.$route.query.endDate;
				this.setDefaultTime(this.$route.query.starDate,this.$route.query.endDate);
				this.currentPage1 = Number(this.$route.query.pageIndex);
				this.formLabel.remark = this.$route.query.remark;
			}else{
				this.setFirstTime();
			}
			this.getList();
			this.getBalance();
		},
		watch:{
		  $route(to,from){
		    // console.log(to.path);
		    // console.warn('------------------------------------');
		    this.BeginDate = this.$route.query.starDate;
			this.EndDate = this.$route.query.endDate;
			this.setDefaultTime(this.$route.query.starDate,this.$route.query.endDate);
			this.currentPage1 = Number(this.$route.query.pageIndex);
			this.formLabel.remark = this.$route.query.remark;
			this.getList();
		  },
		 //  currentPage1(newval,oldval){
		 //  	console.log(newval);
		 //  	console.log(oldval);
		 //  	if(Number(this.$route.query.pageIndex)){
  	// 			console.log('----------------------------------4');
			// 	this.currentPage1 = newval;
			// 	console.log(this.currentPage1);
			// }
		 //  	console.log('----------------------------------3');
		 //  }
		},
		filters:{
			numFilter(val) {
		    // 截取当前数据到小数点后两位
		    // let realVal = Number(val).toFixed(2)
		    // num.toFixed(2)获取的是字符串
		    // return Number(realVal)
		    if(val || val == 0){
		    	val = val.toString().replace(/\$|\,/g,'');
			    if(isNaN(val)) {
			      val = "0";  
			    }
			    let sign = (val == (val = Math.abs(val)));
			    val = Math.floor(val*100+0.50000000001);
			    let cents = val%100;
			    val = Math.floor(val/100).toString();
			    if(cents<10) {
			       cents = "0" + cents
			    }
			    for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
			        val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
			    }

			    return (((sign)?'':'-') + val + '.' + cents);
		    }
		  }
		},
		methods:{
			// 得到时间
			getTimeCon(){
				console.log(this.timeCon);
				this.BeginDate = this.timeCon[0];
				this.EndDate = this.timeCon[1];
			},
			// 设置初始，3个自然月
			setFirstTime(){
				var now = this.getNow();
				var before = this.get3months();
				// console.log(now);
				// console.log(before);
				this.setDefaultTime(before,now);
			},
			// 设置默认
			setDefaultTime(before,now){
				var arr = [];
				arr.push(before);
				arr.push(now);
				this.timeCon = arr;
				this.BeginDate = before;
				this.EndDate = now;
			},
			//当前时间
			getNow(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				return year + '-' + month + '-' + day;
			},
			// 3个自然月
			get3months(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1 - 3;
				// var day = date.getDate();
				var day = '01';
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				return year + '-' + month + '-' + day;
			},
			//页码
		    handleCurrentChange(val){
		    	 console.log(`每页 ${val} 条`);
		    	 this.currentPage1 = val;
		    	 this.$router.push({
		    		name:'putout',
		    		query:{
		    			starDate: this.BeginDate,
			    		endDate: this.EndDate,
			    		pageIndex:val,
			    		remark:this.formLabel.remark,
			    		time: new Date().getTime(),
		    		}
		    	})
		    },
		    // 余额
		    getBalance(){
		    	let params = {};
		    	this.post(params,'services/app/applets/AdminInfo').then(rs => {
		    		if(rs.success){
		    			this.balance = rs.result.balance;
		    			this.totalBalance = rs.result.totalMoney;
		    		}
		    	})
		    },
		    // 列表
		    getList(){
		    	const _this = this;
		    	_this.loading = true;
		    	let params={};
		    	if(_this.currentPage1){
		    		params={
			    		starDate: _this.BeginDate,
			    		endDate: _this.EndDate,
			    		remarks: _this.formLabel.remark,
			    		pageIndex:_this.currentPage1
			    	};
		    	}else{
					params={
			    		starDate: _this.BeginDate,
			    		endDate: _this.EndDate,
			    		remarks: _this.formLabel.remark
			    	};
		    	}
		    	this.post(params,'services/app/applets/GetTransferBatchList').then(rs => {
		    		if(rs.success){
		    			console.log(rs.result);
		    			_this.loading = false;
		    			_this.pagetotal = rs.result.totalCount;
		    			_this.tableData = rs.result.items;	
		    			if(_this.$route.query.pageIndex){
		    				_this.currentPage1 = Number(_this.$route.query.pageIndex);
		    			}
		    		}
		    	})
		    },
		    // 搜索
		    toSearch(){
		    	this.$router.push({
		    		name:'putout',
		    		query:{
		    			starDate: this.BeginDate,
			    		endDate: this.EndDate,
			    		pageIndex:1,
			    		remark:this.formLabel.remark,
			    		time: new Date().getTime(),
		    		}
		    	})
		    	// this.getList();
		    },
		    // 跳页
		    toDetail(){
		    	this.$router.push({
		    		name:'detail'
		    	})
		    },
		    // 跳页
		    toOutgold(){
		    	this.$router.push({
		    		name:'outgold'
		    	})
		    },
		    // 详情
		    toDetailcon(id){
		    	let urlnow = window.location.href;
		    	this.$router.push({
		    		name:'detailcon',
		    		query:{
		    			batchId:id
		    		},
		    		params:{
		    			urlnow:urlnow
		    		}
		    	})
		    }
		}
	}

</script>

<style lang='scss' scoped>
.wd260{
	width: 260px;
}
.wd60{
	width: 60px;
	margin-left:20px;
}
.set20{
	margin-right: 20px;
}
	.app-container{
		.putout{
			.putout-top{
				padding:50px 20px 20px 20px;
				.top-con{
					background-color:#eaf5fb;
					line-height: 60px;
					.p1{
						font-size: 13px;
						margin-left:20px;
						color:#95bacc;
						span{
							font-size:14px;
							font-weight: 600;
							color:#2e94c5;
						}
					}
				}
			}
			.putout-tab{
				width:100%;
				.tab-con{
					border-bottom: 1px solid #cbcbcb;
					span{
						width:130px;
						line-height:60px;
						height: 60px;
						display: inline-block;
						text-align: center;
						font-size:16px;
						cursor: pointer;
						margin-bottom: -1px;
					}
					.firstSpan{
						margin-left:20px;
					}
					.active{
						color:#ee6000;
						background: url(../../../assets/images/bomactive2x.png) center 51px no-repeat;
					}
				}
			}
			.putout-search{
				.search-con{
					// height:28px;
						margin:30px 20px 10px;
				}
			}
			.putout-table{
				.table-con{
					padding:0 20px;
					font-size:13px;
					.setC{
						color:#027dca;
						cursor:pointer;
					}
					.setRed{
						color:#FF0000;
					}
					.setGreen{
						color:#389E0D;
					}
				}
			}
			.putout-page{
				margin:30px 0 30px 0;
				text-align:right;
				padding:0 20px;
			}
		}
	}
</style>